<script setup lang="ts">
import { computed } from "vue";
import type { ColumnConfigProp } from "./type";

const props = defineProps<{
  shadowHeight: number | string;
  rows: any[] | [];
  columns: ColumnConfigProp[] | any;
}>();
const rowConfig = computed(() => {
  return props.rows.map((item, index) => {
    return {
      key: "r_" + (index + 1),
      ...item,
    };
  });
});
</script>

<template>
  <div class="w-full mx-auto relative">
    <!-- Sticky Header -->
    <div
      class="w-full bg-[#F9FAFBFF] sticky top-[66px] mt-[64px] border-t-[1px] border-[#DFE6F3FF] border-b-[1px] border-b-[#DFE6F3FF] z-[2]"
    >
      <div class="w-[1280px] mx-auto">
        <div class="h-[223px] w-full flex">
          <div class="flex-1"></div>
          <div
            v-for="(col, colIndex) in columns"
            :key="col.key"
            class="flex-1 border border-t-0 border-b-0 w-[256px] relative"
            :class="{
              activeProxyColumn: col.recommend.value,
              '!border-t-2 !border-t-[#7868e6ff]':
                colIndex === columns.length - 1 && col.recommend.value,
            }"
          >
            {{ colIndex === columns.length - 1 && col.recommend.value }}
            {{ col.recommend }}
            <!-- Recommended Label -->
            <div
              v-if="col.recommend.value"
              class="w-[calc(100%+4px)] h-[24px] bg-[#7868e6ff] absolute top-[-24px] left-[-2px] font-semibold text-[14px] flex justify-center items-center text-white"
            >
              {{ col.recommend.label }}
            </div>

            <!-- Column Header Slot -->
            <slot :name="`header-${col.key}`" :column="col" :index="colIndex">
              <span class="h-[70px] flex justify-center items-center">
                {{ col.key }}
              </span>
            </slot>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Body -->
    <div class="w-[1280px] mx-auto">
      <div
        v-for="(row, rowIndex) in rowConfig"
        :key="row.key"
        class="h-[70px] flex"
        :class="{
          '!h-[101px]': rowIndex === 0,
          'bg-[#F1EFFC]': row.active,
        }"
      >
        <!-- Title Column -->
        <div
          class="flex-1 text-primary font-normal text-[16px] flex justify-start items-center border-b-[1px] border-t-0 border-b-[#DFE6F3FF]"
          :class="{
            'h-[101px]': rowIndex === 0,
            'pt-7': rowIndex === 0,
          }"
        >
          {{ row.title }}
        </div>

        <!-- Data Columns -->
        <div
          v-for="(col, colIndex) in columns"
          :key="col.key"
          class="flex-1 w-[256px] flex justify-center items-center border border-b-[1px] border-t-0 border-b-[#DFE6F3FF]"
          :class="{
            'h-[101px]': rowIndex === 0,
            'activeProxyColumn !border-t-0 border-b-[1px] border-b-[#DFE6F3FF]':
              col.recommend.value,
            '!border-b-2 !border-b-[#7868e6ff]':
              rowIndex === rowConfig.length - 1 && col.recommend.value,
          }"
        >
          <!-- Cell Slot -->
          <slot
            :name="`${row.key}_${col.key}`"
            :column="col"
            :row="row"
            :rowIndex="rowIndex"
            :colIndex="colIndex"
          >
            {{ `${row.key}_${col.key}` }}
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.activeProxyColumn {
  background-color: #f1effc;
  border-left: 2px solid #7868e6ff;
  border-right: 2px solid #7868e6ff;
  border-top: 1px solid #dfe6f3ff;
}
</style>
